<template>
<div class="registe-state" :style="{height: height +'px'}">

  <!-- 成功 -->
  <div class="state" v-if="state == 0">
    <img src="/static/images/icon/icon-stat-success.png" alt="">
    <div v-if="role === '2'">
      <h3>供应商账号绑定成功</h3>
      <p class="mg-btm-sm text-center">账号{{phone && `[${phone}]`}}已绑定公众号，您可以通</p>
      <p>过该公众号获得订单预订、订单结算等消息通知</p>
      <van-button
        size="large"
        type="buy"
        text="账号解绑退出"
        @click="loginOut"
      />
    </div>
    <div v-else>
      <h3>注册成功</h3>
      <p class="mg-btm-sm text-center">您的分销商账号{{phone && `“${phone}”`}}注册成功！</p>
      <van-button type="buy" text="马上登录" @click="goLogin" />
    </div>
  </div>

  <!-- 审核中 -->
  <div class="state" v-else>
    <img src="/static/images/icon/icon-stat-wait.png" alt="">
    <h3>审核中</h3>
    <p class="mg-btm-sm">您申请的分销商账号{{phone && `“${phone}”`}}正在审核中</p>
    <p>工作人员将在1-2个工作日内完成审核</p>
    <p>审核结果将以短信形式发送到您的手机，请注意查收</p>
  </div>

  <!-- 客服 -->
  <div class="text-center c-gray service-wrap" v-if="service">
    <img :src="service.qr" alt="">
    <p class="mg-btm-sm">长按识别二维码</p>
    <p>如有需要，可以联系客服：<a :href="'tel:' + service.phone">{{service.phone}}</a></p>
  </div>
  <slogan />
</div>
</template>

<script>
import {
  Button,
  Dialog,
} from 'vant'
import Slogan from '@cmpt/slogan'

import {
  format
} from 'util'
import {
  getConfig
} from '@/api/modules/index';
import {
  sign_out
} from '@api/modules/user';
import {
  setSignOut
} from '@utils/storage_base_config';
import {
  getRole,
} from '@utils/role'

export default {
  name: 'regist-success',
  components: {
    [Button.name]: Button,
    [Slogan.name]: Slogan,
  },
  data() {
    return {
      role: getRole() || '1',
      service: null,
      phone: this.$getUrlParam('phone'),
      state: this.$getUrlParam('state') || 1,
      height: 400,
    }
  },
  created() {
    if (this.role === '2') { // 供应商绑定公众号
      document.title = '供应商账号绑定成功'
      this.state = 0
    }
    else {
      this.getService()
    }
  },
  methods: {
    goLogin() {
      this.$goPage('login')
    },
    getService() {
      getConfig(['customer_service', 'customer_wechat'])
        .then(res => {
          let service = {}
          const customer_service = res.data.customer_service,
            customer_wechat = res.data.customer_wechat
          if (customer_service) {
            for (let i in customer_service) {
              service[i] = customer_service[i]
            }
          }
          if (customer_wechat) {
            for (let i in customer_wechat) {
              service[i] = customer_wechat[i]
            }
          }
          this.service = service
        }).catch(err => {})
    },

    loginOut() {
      Dialog.confirm({
        message: '确定退出？'
      }).then(() => {
        if (this.$is_from_app) {
          require.ensure(['@utils/appBridge'], (require) => {
            const {
              appLogout
            } = require('@utils/appBridge')
            appLogout()
          }, 'appBridge')
        } else {
          sign_out().then(res => {
            setSignOut()
            setTimeout(() => {
              this.$goPage('login', {
                role: 2
              })
            }, 100)
          })
        }
      }).catch(err => {})
    },

    setHeight() {
      this.height = window.innerHeight
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.setHeight()
      window.onresize = () => this.setHeight()
    })
  },
}
</script>

<style lang="less" scoped>
@import '~@style_m/basic/utils/index.less';

.registe-state {
  box-sizing: border-box;
  padding: 31px 40px;
  font-size: 14px;
  background: @white;

  img {
    display: block;
    margin: 0 auto;
  }
}

.state {
  margin-bottom: 40px;

  img {
    width: 75px;
    height: 75px;
    margin: 0 auto 25px;
  }

  h3 {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    line-height: 1;
    margin-bottom: 20px;
  }

  .van-button {
    display: block;
    margin: 40px auto 0;

    &:not(.van-button--large) {
      width: 130px;
    }
  }
}

.service-wrap {
  img {
    width: 120px;
  }
}
</style>
